<template>
	<Layout class="p-5 bg-white">
		<Form :label-width="150">
			<row>

					<Col span="8">
                        
                        <FormItem class="w-100" label="车龄">
                            <Input v-model="car.carCondition"/>
                        </FormItem>
                        <FormItem class="w-100" label="表显里程">
                            <Input v-model="car.mileage"/>
                        </FormItem>
                        
                        <FormItem class="w-100" label="车牌归属地">
                            <Input v-model="car.ownerShip"/>
                        </FormItem>
                        
                       <FormItem class="w-100" label="姓名">
                       	<Input v-model="car.personName" style="width:200px" />
                       	
                       </FormItem>
                       <FormItem class="w-100" label="联系微信">
                       	<Input v-model="car.wxNumber" style="width:200px" />
                       	
                       </FormItem>
                       
                       <FormItem class="w-100" label="联系电话">
                       	<Input v-model="car.tel" style="width:200px" />
                       	
                       </FormItem>
                       
							
					</Col>
				
				
					<Col  span="8">
						<FormItem class="w-100" label="品牌">
						    <Select v-model="car.brandId" style="width:160px">
						    	<Option v-for="item in brand" :value="item.brandId">{{ item.brandName }}</Option>
						    </Select>
						</FormItem>
                        <FormItem class="w-100" label="车型">
                        	<Input v-model="car.type"/>
                        </FormItem>
                        <FormItem class="w-100" label="图片上传">
                        	<div v-if="car.imgUrl != ''">
                        	  <img
                        	    :src="car.imgUrl"
                        	    style="width:180px;height:120px"
                        	  />
                        	  <div class="demo-upload-list-cover">
                        	    <Icon
                        	      type="ios-trash-outline"
                        	      @click.native="handleRemove"
                        	    ></Icon>
                        	  </div>
                        	</div>
                        	<Upload
                        	  with-credentials
                        	  :max-size="2048"
                        	  :show-upload-list="false"
                        	  name="file"
                        	  ref="upload"
                        	  :format="['jpg', 'jpeg', 'png']"
                        	  :data="{ module: 'car', date: new Date() }"
                        	  :on-format-error="handleFormatError"
                        	  :on-exceeded-size="handleMaxSize"
                        	  :on-success="handleSuccess"
                        	  :action="url"
                        	>
                        	  <Button icon="ios-cloud-upload-outline" style="margin-top: 5px"
                        	    >Upload files</Button
                        	  >
                        	</Upload>
                        </FormItem> 
                        <FormItem class="w-100" label="多图片上传">
                        	<div v-if="imgUrlList != ''" v-for="(item,index) in imgUrlList" :key="index">
                        	  <img
                        	    :src="imgUrlList[index].imgUrl"
                        	    style="width:180px;height:120px;display: inline-block;"
                        	  />
                        	  <div class="demo-upload-list-cover">
                        	    <Icon
                        	      type="ios-trash-outline"
                        	      @click.native="handleListRemove()"
                        	    ></Icon>
                        		
                        	  </div>
                        	</div>
                        	<Upload
                        	  with-credentials
                        	  :max-size="2048"
                        	  :show-upload-list="false"
                        	  name="file"
                        	  ref="upload"
                        	  multiple
                        	  type="drag"
                        	  :format="['jpg', 'jpeg', 'png']"
                        	  :data="{ module: 'car', date: new Date() }"
                        	  :on-format-error="handleFormatError"
                        	  :on-exceeded-size="handleMaxSize"
                        	  :on-success="handleListSuccess"
                        	  :action="url"
                        	   style="display: inline-block;width:58px;"
                        	>
                        	  <div style="width: 58px;height:58px;line-height: 58px;">
                        	              <Icon type="ios-camera" size="20"></Icon>
                        	          </div>
                        	</Upload>
                        </FormItem>
                      <!--  <FormItem class="w-100" label="出厂日期">
                        	<el-date-picker
                        	     v-model="car.productionDate"
                        	     type="datetime"
                        		format="yyyy-MM-dd HH:mm:ss"
                        		value-format="yyyy-MM-dd HH:mm:ss"
                        	     placeholder="选择日期时间">
                        	   </el-date-picker>
                        </FormItem> -->
                      <!--  <FormItem class="w-100" label="创建日期">
                        	<el-date-picker
                        	     v-model="car.ct"
                        	     type="datetime"
                        		 format="yyyy-MM-dd HH:mm:ss"
                        		 value-format="yyyy-MM-dd HH:mm:ss"
                        	     placeholder="选择日期时间">
                        	   </el-date-picker>	
                        </FormItem> -->
                       
                        <FormItem>
                        	<Button @click="submit" type="primary">提交</Button>
                        	<Button @click="cancel" style="margin-left: 8px">取消</Button>
                        </FormItem>
					</Col>
				
				
			</row>
		
           
		</Form>
	</Layout>
</template>

<script>
	
	export default {
		data: function() {
			return {
				carId : 0,
				car : {},
				brand: [],
				url:'',
				iport:'',
				imgUrlList:[],
				imgList:[],
				img:'',
				imgs:'',
				paifangList: [{
						value: '国四',
						label: '国四'
					},
					{
						value: '国五',
						label: '国五'
					},
					{
						value: '国六',
						label: '国六'
					},
					{
						value: '国六B',
						label: '国六B'
					}
				
				],
				biansuList: [{
						value: '手动',
						label: '手动'
					},
					{
						value: '自动',
						label: '自动'
					}
				],
				ranyouList: [{
						value: '汽油',
						label: '汽油'
					},
					{
						value: '柴油',
						label: '柴油'
					},
					{
						value: '电动',
						label: '电动'
					},
					{
						value: '油电混合',
						label: '油电混合'
					},
					{
						value: '其它',
						label: '其它'
					}
				],
				styleList: [{
						value: '三厢车',
						label: '三厢车'
					},
					{
						value: '两厢车',
						label: '两厢车'
					},
					{
						value: 'SUV',
						label: 'SUV'
					},
					{
						value: '掀背车',
						label: '掀背车'
					},
					{
						value: '跑车',
						label: '跑车'
					},
					{
						value: 'MPV',
						label: 'MPV'
					},
					{
						value: '敞篷车',
						label: '敞篷车'
					},
					{
						value: '旅行车',
						label: '旅行车'
					},
					{
						value: '皮卡',
						label: '皮卡'
					},
					{
						value: '客车',
						label: '客车'
					},
					{
						value: '货车',
						label: '货车'
					}
				],
				qudongList: [{
						value: '前驱',
						label: '前驱'
					},
					{
						value: '后驱',
						label: '后驱'
					},
					{
						value: '四驱',
						label: '四驱'
					}
				]
				
			};
		},
		methods: {
			//图片上传时文件格式错误方法
			handleFormatError(file) {
			  this.$Notice.warning({
			    title: '文件格式不正确',
			    desc:
			      '文件 ' +
			      file.name +
			      ' 格式不正确，请上传 jpg 或 png 或 jpeg格式的图片。',
			  })
			},
			//校验图片的大小，不能大于2M
			handleMaxSize: function(file) {
			  this.$Modal.info({
			    title: '超出文件大小限制',
			    content: '文件 ' + file.name + ' 太大，不能超过 2M。',
			  })
			},
			handleRemove(file) {
			  // 从 upload 实例删除数据 
			  this.$data.car.imgUrl = ''
			},
			//上传成功后的勾子 
			handleSuccess: function(response, file, fileList) {
				
			  this.$data.car.imgUrl = response.DATA.URL
			  console.log( this.$data.car.imgUrl)
			},
			
			handleListRemove(file) {
			  // 从 upload 实例删除数据 
			  this.$data.imgUrlList = []
			},
			//上传成功后的勾子 
			handleListSuccess: function(response, file, fileList) {
				this.$data.imgs = response.DATA.URL
			  var img = {}
			  img.carId = this.$data.carId
			  img.imgUrl = this.$data.imgs
			  console.log(img)
			  this.$data.imgUrlList.unshift(img)
			  
			  // this.$data.imgUrlList.carId = this.$data.car.carId
			  // this.$data.imgUrlList.imgUrl = response.DATA.URL
			  console.log( this.$data.imgUrlList)
			},
			
			
			cancel: function() {
				this.$tabs.close();
			},
			searchImg:function(){
				this.http.get({
					url:`/car/image/list/${this.$data.carId}`,
				}).then(data => {
					this.$data.imgUrlList = data
					console.log(data)
				})
			},
			updataImg: function(){
				var imgs = []
				for(var i = 0;i<this.$data.imgUrlList.length;i++){
					imgs.unshift(this.$data.imgUrlList[i].imgUrl)
				}
				var imgString = imgs.toString()
				this.http.put({
					url:'/car/image/upload',
					param:{
						carId:this.$data.car.carId,
						images:imgString
					}
				}).then(data => {
					console.log("shangchuanl")
				})
			},
			cancelImg:function(){
				this.http.delete({
					url:`/car/image/remove/${this.$data.carId}`,
				}).then(data => {
					
					console.log("55")
				})
			},
			
			submit: function() {
				            this.cancelImg()
							let self = this;
							if (this.$data.car.mileage.length == 0) {
			
								this.message.error("里程必须输入");
								return;
							}
			
							this.http.put({
								url: "/car/info",
								param: self.car,
							}).then(() => {
								self.message.info("修改成功");
								this.updataImg()
								self.$tabs.close();
                                this.$router.push({
                                	name: "car",
                                	params: {}
                                });
							});
						},
			init: function() {
				
				
				let self = this;
			
				self.http.get({
					url: "/car/info",
					param: {
						carId: self.$data.carId
					}
				}).then(data => {
					
					self.$data.car = data;
					console.log(self.$data.car)
				});
			    
			    
			
			},
			getBrand() {
				this.http.get({
					url: "/brand/list",
					param: {}
				}).then(data => {
					this.$data.brand = data
				});
			}
		},
		created: function () {
			this.iport = this.store.state.iport
			this.url = this.iport + 'image/upload'
			this.getBrand();
			this.$data.carId = this.$route.params.carId;
			this.init();
			this.searchImg()
			
		},
	}
</script>

<style>
</style>
